<template>
	<view class="container">
		<view class="user-section">
			<image class="bg hidden" src="/static/user-bg.jpg"></image>
			<view class="user-info-box">
				<view class="portrait-box">
					<image class="portrait" :src="user.userInfo.avatar || '/static/missing-face.png'"></image>
				</view>
				<view class="info-box flex" style="justify-content: space-between;">
					<view class="left">
						<view class="username">{{ user.userInfo.nickname || '游客' }}</view>
						<view class="sum">
							<text v-show="$store.state.app.siteInfo.versionFuncsAll.indexOf('user_score') >= 0">
								积分：{{userCenterData.userScore[2].balance }}
							</text>
						</view>
					</view>
					<view class="right">
						<navigator url="/pages/chat/recent/lists"
							v-show="$store.state.app.siteInfo.versionFuncsAll.indexOf('chat') >= 0">
							<text class="xyicon xyicon-message"></text>
						</navigator>
						<!-- #ifdef MP -->
							<navigator url="/pages/core/settings/lists">
								<text class="xyicon xyicon-settings-o"></text>
							</navigator>
						<!-- #endif -->
					</view>
				</view>
			</view>
			<view class="vip-card-box" v-show="$store.state.app.siteInfo.versionFuncsAll.indexOf('user_vip') >= 0">
				<image class="card-bg hidden" src="/static/vip-card-bg.png" mode=""></image>
				<view class="b-btn" @click="navTo('/pages/userVip/vip/buy')" v-show="!userCenterData.userVip.id">
					<!-- #ifdef APP-PLUS -->
					<text class="e-b">立即开通</text>
					<!-- #endif -->
					<!-- #ifndef APP-PLUS -->
					<text class="e-b">此平台不支持此服务</text>
					<!-- #endif -->
				</view>
				<view class="b-btn" @click="navTo('/pages/userVip/vip/my')" v-show="userCenterData.userVip.id">
					{{userCenterData.userVip.vipStatusLable}}
				</view>
				<view class="tit">
					<text class="xyicon icon-iLinkapp-"></text>
					会员
				</view>
				<text class="e-m">Vip Club</text>
				<!-- #ifdef APP-PLUS -->
				<text class="e-b">开通会员享受会员价格</text>
				<!-- #endif -->
				<!-- #ifndef APP-PLUS -->
				<text class="e-b">此平台不支持此服务</text>
				<!-- #endif -->
			</view>
		</view>

		<view
			class="cover-container"
			:style="[
				{
					transform: coverTransform,
					transition: coverTransition
				}
			]"
			@touchstart="coverTouchstart"
			@touchmove="coverTouchmove"
			@touchend="coverTouchend">
			<image class="arc" src="/static/arc.png"></image>
			<view class="section-wrap" :style="{top: $store.state.app.siteInfo.versionFuncsAll.indexOf('user_vip') >= 0 ? 0 : '-40px'}">
				<!-- 订单 -->
				<view class="section-box">
					<xy-list-item
						type="link"
						title="我的订单"
						url="/pages/ishop/order/my?tab=0"
						more="xyicon xyicon-right"
						current="全部订单"
						titleFs="15px">
					</xy-list-item>
					<view class="order-section">
						<view class="order-item" @click="navTo('/pages/ishop/order/my?tab=0')" hover-class="common-hover" :hover-stay-time="50">
							<text class="xyicon xyicon-orderlist"></text>
							<text>全部订单</text>
						</view>
						<view class="order-item" @click="navTo('/pages/ishop/order/my?tab=1')" hover-class="common-hover" :hover-stay-time="50">
							<text class="xyicon xyicon-waitpay"></text>
							<text>待付款</text>
						</view>
						<view class="order-item" @click="navTo('/pages/ishop/order/my?tab=2')" hover-class="common-hover" :hover-stay-time="50">
							<text class="xyicon xyicon-received"></text>
							<text>待收货</text>
						</view>
						<view class="order-item" @click="navTo('/pages/ishop/order/my?tab=3')" hover-class="common-hover" :hover-stay-time="50">
							<text class="xyicon xyicon-comment"></text>
							<text>待评价</text>
						</view>
					</view>
				</view>
				<view class="section-box m-t-sm" v-show="$store.state.app.siteInfo.versionFuncsAll.indexOf('wallet') >= 0">
					<xy-list-item
						type="link"
						title="我的资产"
						url=""
						more=""
						current=""
						titleFs="15px">
					</xy-list-item>
					<view class="tj-sction">
						<view class="tj-item" @click="navTo('/pages/user_score/score_log/my?typeId=1')">
							<text class="num">{{userCenterData.userScore[1].balance}}</text>
							<text>余额</text>
						</view>
						<view class="tj-item" v-show="$store.state.app.siteInfo.versionFuncsAll.indexOf('coupon') >= 0">
							<text class="num">0</text>
							<text>优惠券</text>
						</view>
						<view class="tj-item" @click="navTo('/pages/user_score/score_log/my?typeId=2')">
							<text class="num">{{userCenterData.userScore[2].balance }}</text>
							<text>积分</text>
						</view>
					</view>
				</view>
				<!-- 浏览历史 -->
				<view class="section-box m-t-sm">
					<xy-list-item
						type="link"
						title="我的服务"
						url="/pages/ishop/order/my?tab=0"
						more=""
						current=""
						titleFs="15px">
					</xy-list-item>
					<view class="history-section icon">
						<view class="sec-header">
							<text class="xyicon xyicon-history"></text>
							<text>浏览历史</text>
						</view>
						<scroll-view scroll-x class="h-list">
							<image
								:key="item.id"
								v-for="item in historyList"
								@click="navTo('/pages/ishop/item/info?id=' + item.dataValue)"
								:src="item.itemInfo.cover"
								mode="aspectFill">
							</image>
						</scroll-view>
						<xy-list-item
							v-show="$store.state.app.siteInfo.versionFuncsAll.indexOf('wallet') >= 0"
							type="list"
							icon="xyicon xyicon-wallet"
							icon-color="#e07472"
							title="我的钱包"
							:current="'您的会员还有' + userCenterData.userVip.leftDays  + '天过期'"
							url="/pages/wallet/index/index"
							titleFs="15px">
						</xy-list-item>
						<xy-list-item
							type="list"
							icon="xyicon xyicon-address"
							icon-color="#5fcda2"
							title="地址管理"
							url="/pages/user_address/address/my"
							titleFs="15px">
						</xy-list-item>
						<xy-list-item
							type="list"
							icon="xyicon xyicon-heart"
							icon-color="#fa436a"
							title="我的收藏"
							url="/pages/ishop/collect/my"
							titleFs="15px">
						</xy-list-item>
						<xy-list-item
							v-show="$store.state.app.siteInfo.versionFuncsAll.indexOf('scoreshop') >= 0"
							type="list"
							icon="xyicon xyicon-gift"
							icon-color="#f5a623"
							title="积分商城"
							url="/pages/scoreshop/item/lists"
							titleFs="15px">
						</xy-list-item>
						<xy-list-item
							v-show="$store.state.app.siteInfo.versionFuncsAll.indexOf('user_invite') >= 0"
							type="list"
							icon="xyicon xyicon-share"
							icon-color="#50e3c2"
							title="分享"
							current="邀请好友赢大礼"
							url="/pages/user_invite/invite/share"
							titleFs="15px">
						</xy-list-item>
						<xy-list-item
							type="list"
							icon="xyicon xyicon-document"
							icon-color="#417505"
							title="用户协议"
							url="/pages/user_agreement/agreement/info?title=用户协议"
							titleFs="15px">
						</xy-list-item>
						<xy-list-item
							type="list"
							icon="xyicon xyicon-privacy"
							icon-color="#5956C1"
							title="隐私条款"
							url="/pages/user_agreement/agreement/info?title=隐私条款"
							titleFs="15px">
						</xy-list-item>
						<xy-list-item
							type="list"
							icon="xyicon xyicon-kefu"
							icon-color="#417505"
							title="我的客服"
							url="/pages/core/user/kf"
							titleFs="15px">
						</xy-list-item>
						<xy-list-item
							type="list"
							icon="xyicon xyicon-settings"
							icon-color="#59BFC1"
							title="设置"
							url="/pages/core/settings/lists"
							titleFs="15px">
						</xy-list-item>
						<!-- #ifdef H5 -->
						<xy-list-item
							v-show="this.app.siteInfo.appDownurl"
							type="list"
							icon="xyicon xyicon-download"
							title="下载APP"
							@click.native="goToDownload"
							titleFs="15px">
						</xy-list-item>
						<!-- #endif -->
					</view>
				</view>
				<view class="support flex p-t" style="color: #ccc;flex-direction: column;justify-content: center;align-items: center;">
					<view class="name">
						XYShop
					</view>
					<view class="sp font-sm">
						提供技术支持
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import { mapState, mapMutations } from 'vuex';
	let startY = 0,
		moveY = 0,
		pageAtTop = true;
	export default {
		data() {
			return {
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				userCenterData: {
					userScore: {
						1 : {
							balance: 0
						},
						2 : {
							balance: 0
						}
					},
					userVip: {
						id: 0,
						leftDays: 0,
						vipStatusLable: ''
					}
				},
				historyList: []
			};
		},
		onLoad() {
			this.loadData();
			this.getHistoryList();
			this.getUserInfo('/v1/core/user/info');
		},
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.navTo('/pages/core/settings/lists');
			} else if (index === 1) {
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.navigateTo({
					url: '/pages/chat/recent/lists'
				});
			}
		},
		// #endif
		computed: {
			...mapState(['app', 'user'])
		},
		methods: {
			async getUserInfo(url){
				// 如果用户id为空自动更新用户信息
				if (this.user.token && this.user.userInfo.id == 0) {
					let res = await this.util.request({
						url: url,
						method: 'get',
					});
					if (res.code == '200') {
						var default_userInfo = this.user.userInfo
						for (let key in res.data.userInfo) {
						  if (res.data.userInfo[key] != '') {
							default_userInfo[key] = res.data.userInfo[key]
						  }
						}
						this.$store.commit('user/setUserInfo', default_userInfo)
					} else {
						this.util.showToast({
							title: res.msg,
							icon: 'loading',
							duration: 3000
						});
					}
				}
			},
			goToDownload(){
				// #ifdef H5
				window.open(this.app.configSite.appDownurl);
				// #endif
			},
			async loadData() {
				if (this.$store.state.user.token) {
					let res = await this.util.request({
						url: '/v1/core/user/center',
						method: 'get'
					});
					if (res.code == 200) {
						if (res.data.dataList.userScore) {
							this.userCenterData.userScore = res.data.dataList.userScore;
						} 
						if (res.data.dataList.userVip) {
							this.userCenterData.userVip = res.data.dataList.userVip;
						}
					}
				}
			},
			async getHistoryList() {
				if (this.$store.state.user.token) {
					let res1 = await this.util.request({
						url: '/v1/ishop/history/lists/0',
						method: 'get',
						data: {
							limit: 30
						}
					});
					if (res1.code == 200) {
						this.historyList = res1.data.dataList;
					}
				}
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				if (!this.user.userInfo.id) {
					url = '/pages/core/user/login';
				}
				uni.navigateTo({
					url
				});
			},

			/**
			 *  会员卡下拉和回弹
			 *  1.关闭bounce避免ios端下拉冲突
			 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
			 *    transition设置0.1秒延迟，让css来过渡这段空窗期
			 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
			 */
			coverTouchstart(e) {
				if (pageAtTop === false) {
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e) {
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if (moveDistance < 0) {
					this.moving = false;
					return;
				}
				this.moving = true;
				if (moveDistance >= 80 && moveDistance < 100) {
					moveDistance = 80;
				}

				if (moveDistance > 0 && moveDistance <= 80) {
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend() {
				if (this.moving === false) {
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			}
		}
	};
</script>
<style lang="scss">
	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
	}
	.user-section {
		box-sizing: content-box;
		height: 300px;
		padding: 40px 10px 0;
		padding-top: calc(44px + var(--status-bar-height));
		position: relative;
		background-color: $uni-color-primary;
		border-bottom-right-radius: 187px 8px;
		border-bottom-left-radius: 187px 8px;
		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: 0.7;
		}
		
		.user-info-box {
			width: 100%;
			height: 100px;
			display: flex;
			align-items: center;
			position: relative;
			z-index: 1;
			color: #fff;
			.portrait-box {
				.portrait {
					width: 130upx;
					height: 130upx;
					border: 5upx solid #fff;
					border-radius: 50%;
				}
			}
			.info-box {
				width: 100%;
				justify-content: space-between;
				align-items: center;
				.left {
					margin-left: 20px;
					font-size: 20px;
					.username {
						font-size: 20px;
						margin-bottom: 5px;
					}
					.sum {
						font-size: 14px;
						color: #eee;
					}
				}
				.right {
					display: flex;
					width: 45px;
					justify-content: space-between;
					.xyicon {
						font-size: 20px;
					}
				}
			}
		}
		.vip-card-box {
			display: flex;
			flex-direction: column;
			color: #f7d680;
			height: 120px;
			background: linear-gradient(left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
			border-radius: 8px 8px 0 0;
			overflow: hidden;
			position: relative;
			padding: 10px 12px;
			.card-bg {
				position: absolute;
				top: 20upx;
				right: 0;
				width: 190px;
				height: 130px;
			}
			.b-btn {
				position: absolute;
				right: 10px;
				top: 8px;
				width: 66px;
				height: 20px;
				text-align: center;
				line-height: 20px;
				font-size: 11px;
				color: #36343c;
				border-radius: 20px;
				background: linear-gradient(left, #f9e6af, #ffd465);
				z-index: 1;
			}
			.tit {
				font-size: 14px;
				color: #f7d680;
				margin-bottom: 14px;
				.xyicon {
					color: #f6e5a3;
					margin-right: 8px;
				}
			}
			.e-b {
				font-size: $font-sm;
				color: #d8cba9;
				margin-top: 5px;
			}
		}
	}
	.cover-container {
		margin-top: -150px;
		min-height: 200px;
		position: relative;
		background: #efeff4;
		padding-bottom: 20upx;
		.xy-list-item {
			min-height: 48px;
		}
		.arc {
			position: absolute;
			left: 0;
			top: -17px;
			width: 100%;
			height: 18px;
		}
		.section-wrap {
			position: absolute;
			top: -40px;
			width: 100%;
			padding-bottom: 150px;
			.section-box {
				margin: 0 10px;
				border-radius: 10px;
				overflow: hidden;
				.order-section {
					@extend %section;
					padding: 14px 0;
					.order-item {
						@extend %flex-center;
						width: 60px;
						height: 60px;
						font-size: $font-sm;
						color: $font-color-dark;
					}
					.xyicon {
						font-size: 24px;
						margin-bottom: 9px;
						color: $uni-color-primary;
					}
					.icon-shouhoutuikuan {
						font-size: 22px;
					}
				}
				.tj-sction {
					@extend %section;
					.tj-item {
						@extend %flex-center;
						flex-direction: column;
						height: 70px;
						font-size: $font-sm;
						color: #75787d;
					}
					.num {
						font-size: $font-lg;
						color: $font-color-dark;
						margin-bottom: 4px;
					}
				}
				.history-section {
					padding: 15px 0 0;
					background: #fff;
					.sec-header {
						display: flex;
						align-items: center;
						font-size: $font-base;
						color: $font-color-dark;
						line-height: 20px;
						margin-left: 15px;
						.xyicon {
							font-size: 22px;
							color: #5eba8f;
							margin-right: 8px;
							line-height: 20px;
						}
					}
					.h-list {
						white-space: nowrap;
						width: auto;
						padding: 15px 15px 0;
						image {
							display: inline-block;
							width: 80px;
							height: 80px;
							margin-right: 10px;
							border-radius: 5px;
						}
					}
				}
			}
		}
	}
</style>
